//封装getElementById  注意getElementById为字符串
function byId(id){
	return typeof(id)=="string"?document.getElementById(id):id;
}
var index=0,
    timer=null,
    pics=byId("banner").getElementsByTagName("div"),
    dots=byId("dots").getElementsByTagName("span"),
    prev=byId("prev"),
    next=byId("next"),
    len =pics.length,
    menu=byId("menu-content"),
    subMenu=byId("sub-menu"),
    innerBox=subMenu.getElementsByClassName("inner-box");
    menuItem=menu.getElementsByClassName("menu-item");

function slideImg(){
	var main =byId("main");
	//滑过清除定时器，离开继续
	main.onmouseover = function(){
		//滑过清除定时器
		if(timer) clearInterval(timer);
	}
	//（事件）
	main.onmouseout=function(){
		timer=setInterval(function(){
			index++;
			if(index >= len){
				index = 0;
			}
			//切换图片
			changeImg(index);
		},3000);
	}
	main.onmouseout(); //自动轮播(方法)
	
	//遍历所有圆点，并绑定点击事件，点击圆点切换图片
	for (var d=0;d<len;d++){
		//给所有的span添加一个id的属性，值为d，作为当前span的索引
		dots[d].id=d;
		dots[d].onclick=function(){ 
			//改变index为当前span的索引（注意function会改变作用域）
			index=this.id;
			this.className="active";
			//调用changeImg，实现切换图片
			changeImg();
		}
	}
	//下一张
	next.onclick=function(){
		index++;
		if(index>=len)index=0;
		changeImg(index);
	}
	//上一张
	prev.onclick=function(){
		index--;
		if(index<0) index=len-1;
		changeImg(index);
	}
	//导航菜单
	//遍历主菜单，且绑定事件
	for(var m=0;m<menuItem.length;m++){
		//给每一个menu-item定义一个data-index属性作为索引（在dots中已经使用了id）
		menuItem[m].setAttribute("data-index",m);
		menuItem[m].onmouseover=function(){
			subMenu.className="sub-menu";
			var idx = this.getAttribute("data-index");
			//遍历所有的子菜单，将每个都隐藏
			for(var j=0;j<innerBox.length;j++){
			innerBox[j].style.display='none';
			menuItem[j].style.background='none';
			}
			menuItem[idx].style.background = "rgba(0,0,0,0.1)";
			innerBox[idx].style.display = 'block';
		}
	}
	//鼠标离开
	menu.onmouseout=function(){
		subMenu.className="sub-menu hide";
	}
	
	subMenu.onmouseover=function(){
		this.className="sub-menu";
	}
	subMenu.onmouseout=function(){
		this.className="sub-menu hide";
	}
}
//切换图片
function changeImg(){
	//遍历banner下所有的div和dots，将其隐藏
	for(var i=0;i<len;i++){
		pics[i].style.display="none";
		dots[i].className="";
	}
	//根据index找到其中的div和当前的span
	pics[index].style.display="block";
	dots[index].className="active";
}
slideImg();